<template>
	<view class="container">
		<view class="page-body">
			<!-- 左边分类 -->
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
				<view class="nav-left-item" @click="typeClickMain(item,index)" :key="index" :class="index==typeActive?'active':''"
				 v-for="(item,index) in typeList">
					{{item.title}}
				</view>
			</scroll-view>
			
			<!-- 右边分类 -->
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'"
			 scroll-with-animation>
				<view class="nav-right-item" v-for="(item,index) in subType_List" :key="index" >
					<!-- banner图 -->
					<view class="banner">
						<image class="banner-img" :src="item.img" mode=""></image>
					</view>					
					<!-- 二级list -->
					<view class="add">
						<view class="addmargin" v-for="(item1,index1) in item.List" :key="item1.id" >
							<view class="addbj" @click="navToList(item1.id)">
								<image class="addbj-img" mode="aspectFit" :src="item1.image" />
								<view class="addw">{{item1.title}}</view>
							</view>							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import json from '@/json/sort.js'
	export default {
		name: 'tree-list',
		props: {
			typeList: {
				type: Array,
				default: function() {
					return []
				}
			},
			subTypeList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				height: 0,
				typeActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				subType_List: [],
			}
		},
		mounted() {
			this.height = uni.getSystemInfoSync().windowHeight;
			this.subType_List = this.subTypeList
		},
		methods: {
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			typeClickMain(categroy, index) {
				this.typeActive = index;
				json.subTypeList.map((itm, inx) => {
					if (index === inx) {
						this.subType_List = itm
					}
				})
				// let subindex = 'mockData.subTypeList'+index
				// let subtl = eval("var x=10;var y=20;(x*y)")// eval 计算字符串，其中含有要计算的 JavaScript 表达式或要执行的语句
				// console.log(subtl,subindex)
				// console.log(mockData.subTypeList,index)
			},
			navToList(item1) {
				// console.log(item)
				// this.$jump('/pages/goods/detail/detail?text='+item.title+'&src='+item.image)
				uni.navigateTo({
					url: `/pages/product/product`
				})
			}
		},

	}
</script>

<style lang="scss">
	.page-body {
		display: flex;
	}

	.nav-left {
		flex-shrink: 0;
		width: 196rpx;
		height: 100%;
		background-color: #fff;

		.nav-left-item {
			height: 100upx;
			font-size: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			&.active {
				color:#fa5a62;
				background: #f8f8f8;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 40rpx;
					width:6rpx;
					background-color:#fc6a79;
					opacity: .8;
				}
			}
		}

	}

	.nav-right {
		flex: 1;
		overflow: hidden;
		padding: 0 13rpx;

		.nav-right-item {
			width: 100%;
			height: 100%;
			padding-top: 18rpx;
			
			.banner {
				width: 100%;
				height: 199rpx;
				overflow: hidden;
				
				
				.banner-img{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.add{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				background: #fff;
				margin-top: 13rpx;
				
				.addmargin {					
					font-size: 28rpx;
					
					.addbj {
						width: 176rpx;
						flex-shrink: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;					
						font-size: 26rpx;
						color: #666;
						padding-bottom: 20rpx;

						.addbj-img {
							width: 150rpx;
							height: 150rpx;
						}
					}
					
					
				}
				
				
			}
			
		}
	}
</style>
